<template>
	<view style="margin: 4%;">
		<view v-if="departDetail!==null && departDetail.depMinister!==null"
			style="display: flex;justify-content: space-between;margin-top: 20rpx;margin-bottom: 20rpx;border-bottom: 1rpx solid #C0C0C0;padding-bottom: 20rpx;">
			<view style="display: flex;">
				<view><img style="width: 80rpx;height: 80rpx;border-radius: 80rpx;"
						:src="departDetail.depMinister.userAvatar" alt="">
				</view>
				<view style="margin-left: 20rpx;">
					<view>{{departDetail.depMinister.userUsername}}<span
							v-if="depName!=='社长' && depName!=='副社长' && depName!=='团支书' && depName!=='财务'"
							style="color: #808080;font-size: smaller;margin-left: 10rpx;">部长</span></view>
					<view style="color: #808080;font-size: smaller;margin-top: 10rpx;">
						{{departDetail.depMinister.userPhone}}
					</view>
				</view>
			</view>
			<view style="text-align: center;">
				<view style="color: #808080;"><button v-if="depName!=='社长' && myJob==3" size="mini" type="warn"
						@click="changeIdentity(departDetail.depMinister.userId,false,1,departDetail.depMinister.userUsername)">解雇</button>
				</view>
			</view>
		</view>
		<view v-if="departDetail!==null && departDetail.depViceMinister!==null"
			style="display: flex;justify-content: space-between;margin-top: 20rpx;margin-bottom: 20rpx;border-bottom: 1rpx solid #C0C0C0;padding-bottom: 20rpx;">
			<view style="display: flex;">
				<view><img style="width: 80rpx;height: 80rpx;border-radius: 80rpx;"
						:src="departDetail.depViceMinister.userAvatar" alt="">
				</view>
				<view style="margin-left: 20rpx;">
					<view>{{departDetail.depViceMinister.userUsername}}<span
							v-if="depName!=='社长' && depName!=='副社长' && depName!=='团支书' && depName!=='财务'"
							style=" color: #808080;font-size: smaller;margin-left: 10rpx;">副部长</span></view>
					<view style="color: #808080;font-size: smaller;margin-top: 10rpx;">
						{{departDetail.depViceMinister.userPhone}}
					</view>
				</view>
			</view>
			<view style="text-align: center;">
				<view style="color: #808080;"><button v-if="myJob==3" size="mini" type="warn"
						@click="changeIdentity(departDetail.depViceMinister.userId,false,2,departDetail.depViceMinister.userUsername)">解雇</button>
				</view>
			</view>

		</view>
		<uni-popup ref="depart" type="dialog">
			<uni-popup-dialog title="更新后的部门名" mode="input" @confirm="updateDepart"></uni-popup-dialog>
		</uni-popup>
		<!-- 弹出层 -->
		<u-popup v-model="show" mode="center" width="92%">
			<view>
				<uni-search-bar bgColor="white" placeholder="请输入用户昵称" @confirm="search" @cancel="reset"
					@clear="reset" />
			</view>
			<view style="padding: 2%;">
				<view v-for="(user,index) in userInfoList" :key="index"
					@click="addDepartEvent(user.userId,user.userUsername)"
					style="display: flex;justify-content: space-between;margin-top: 20rpx;margin-bottom: 20rpx;border-bottom: 1rpx solid #C0C0C0;padding-bottom: 20rpx;">
					<view style="display: flex;">
						<view><img style="width: 80rpx;height: 80rpx;border-radius: 80rpx;" :src="user.userAvatar"
								alt="">
						</view>
						<view style="margin-left: 20rpx;">
							<view>{{user.userUsername}}</view>
							<view style="color: #808080;font-size: smaller;margin-top: 10rpx;">{{user.userPhone}}</view>
						</view>
					</view>
					<view style="text-align: center;">
						<view style="color: #808080;">{{user.depName}}</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 普通部门任职职位确认 -->
		<u-action-sheet :list="list" v-model="jobShow" @click="addD"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orgId: null,
				depId: null,
				depName: null,
				myJob: null,
				departDetail: null,
				show: false,
				list: [{
					text: '部长'
				}, {
					text: '副部长'
				}],
				jobShow: false,
				userRequest: {
					pageNo: 0,
					pageSize: 10,
					orgId: null,
					username: null
				},
				userInfoList: [],
				userId: null,
				userName: null
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.orgId = option.orgId;
			this.depId = option.depId;
			this.myJob = option.myJob;
			this.userRequest.orgId = this.orgId;
			this.depName = option.depName;
			uni.setNavigationBarTitle({
				title: this.depName
			})
			this.getDepartDetailList();
		},
		// 右上角更多
		onNavigationBarButtonTap: function(e) {
			if (this.myJob !== '3') {
				uni.showModal({
					content: '权限不足',
					showCancel: false,
					success: res => {
						return
					}
				})
				return
			}
			var that = this;
			uni.showActionSheet({
				itemList: ['任职', '更换部门名称', '删除本部门'],
				success: function(res) {
					if (res.tapIndex == 2) {
						// 删除本部门
						uni.showModal({
							title: '提示',
							confirmColor: 'red',
							content: '确定删除本部门吗?',
							success: res => {
								if (res.confirm) {
									that.removeDepart();
								}
							}
						});
					} else if (res.tapIndex == 1) {
						// 更新部门名
						that.$refs.depart.open();
					} else if (res.tapIndex == 0) {
						// 任职
						that.show = true;
					}
				}
			});
		},
		methods: {
			addD(index) {
				var position = null;
				if (index == 0) {
					position = 1;
				} else if (index == 1) {
					position = 2;
				}
				this.changeIdentity(this.userId, true, position, this.userName)
			},
			// 任职
			addDepartEvent(targetId, userUsername) {
				// 删除本部门
				this.show = false;
				if (this.depName == '社长') {
					// 弹出层再次确认
					uni.showModal({
						title: '提示',
						content: `确定委任 ${userUsername} 为新社长吗?`,
						success: res => {
							if (res.confirm) {
								this.nextMinister(targetId);
							}
						}
					});
				} else if (this.depName == '副社长' || this.depName == '团支书' || this.depName == '财务') {
					// 再次确认委任职位
					this.changeIdentity(targetId, true, null, userUsername);
				} else {
					// 委任职位(部长还是副部长)
					this.userId = targetId;
					this.userName = userUsername;
					this.jobShow = true;
				}
			},
			// 委任社长
			nextMinister(targetId) {
				this.$http.request({
					url: `/organizations/web/department/boss/${this.orgId}/${targetId}`,
					method: 'POST'
				}).then(res => {
					res = res.data;
					if (res.result) {
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success: res => {
								this.getDepartDetailList();
								uni.navigateTo({
									url: '../myOrganization'
								})
							}
						});
					} else {
						uni.showModal({
							content: res.msg,
							showCancel: false
						});
					}
				})
			},
			// 搜索
			search(res) {
				this.userRequest.username = res.value;
				this.userRequest.pageNo = 0;
				this.userInfoList = [];
				this.getUserList();
			},
			// 重置
			reset() {
				this.userRequest.pageNo = 0;
				this.userRequest.username = null;
				this.userInfoList = [];
				this.getUserList()
			},
			getUserList() {
				this.userRequest.pageNo++;
				this.$http.request({
					url: '/organizations/web/user/userList',
					method: 'POST',
					data: this.userRequest
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.userInfoList = [
							...this.userInfoList,
							...res.data
						]
					} else {
						uni.showToast({
							title: res.data,
							icon: 'none'
						});
					}
				})
			},
			// 更新部门名
			updateDepart(done, value) {
				this.$http.request({
					url: `/organizations/web/department/update`,
					method: 'PUT',
					data: {
						orgId: this.orgId,
						depId: this.depId,
						depName: value
					}
				}).then(res => {
					res = res.data;
					if (res.result) {
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success: res => {
								this.$refs.depart.close();
								uni.setNavigationBarTitle({
									title: value
								})
								this.getDepartDetailList();
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			// 删除本部门
			removeDepart() {
				this.$http.request({
					url: `/organizations/web/department/delete/${this.orgId}/${this.depId}`,
					method: 'DELETE'
				}).then(res => {
					res = res.data;
					if (res.result) {
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success: res => {
								uni.navigateBack()
							}
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			getDepartDetailList() {
				this.$http.request({
					url: `/organizations/web/department/depart/${this.orgId}/${this.depId}`
				}).then(res => {
					res = res.data;
					if (res.result) {
						this.departDetail = res.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}

				})
			},
			// 任职|解雇
			changeIdentity(targetId, judge, position, username) {
				if (!judge) {
					// 解雇
					uni.showModal({
						content: `您确定要解雇 ${username} 吗?`,
						confirmColor: 'red',
						success: res => {
							if (res.confirm) {
								this.changeIdentity2(targetId, judge, position);
							}
						}
					})
				} else {
					// 任职
					uni.showModal({
						content: `确定委任 ${username} 为 ${this.depName} 吗?`,
						success: res => {
							if (res.confirm) {
								this.changeIdentity2(targetId, judge, position);
							}
						}
					})
				}

			},
			// 任职/解雇请求
			changeIdentity2(targetId, judge, position) {
				this.$http.request({
					url: '/organizations/web/department/office',
					method: 'POST',
					data: {
						depId: this.depId,
						judge: judge,
						orgId: this.orgId,
						position: position,
						targetId: targetId
					}
				}).then(res => {
					res = res.data;
					if (res.result) {
						uni.showModal({
							content: res.msg,
							showCancel: false,
							success: res => {
								this.getDepartDetailList();
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			}
		}
	}
</script>

<style>
</style>
